<%-- 
 *Workshop 
 *Class ID        : SE0691   
 *Student ID      : SE90009
 *Student Name    : Phạm Nguyễn Nhật Trung
 *Due Date        : Nov 28, 2012, 12:05:28 AM
 *I declare that this assignment is my own work
 *in accordance with FPT Policy.
--%>

<%@page import="java.util.Locale"%>
<%@page import="java.util.Date"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.Iterator"%>
<%@page import="tracker.entity.TorrentsEntity"%>
<%@page import="java.util.List"%>
<%@page import="tracker.stub.TorrentsSessionStub"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="style/calendar.css" />
        <link rel="stylesheet" type="text/css" href="style/custom_1.css" />
        <title>Torrents List View By Date</title>

    </head>
    <body>
        <%
            Boolean isLogin = false;
            Cookie[] ck = request.getCookies();
            try { //Check isLogin
                if (ck != null) {
                    for (int i = 0; i < ck.length; i++) {
                        if ("userId".equals(ck[i].getName())) { //Finding Username Cookie                
                            i = ck.length;
                            isLogin = true;
                        }
                    }

                }
            } catch (Exception e) {
            }
            if (isLogin == false) {
                response.sendRedirect("login.jsp");
                return;
            }
        %>
        <jsp:include page="navigation.jsp" />
        <!--Quick Fix Background-->
        <style>
            .contents {
                background: none;
            }
        </style>
        <div class="contents">
            <div class="container">	
                <div class="custom-calendar-wrap custom-calendar-full">
                    <div class="custom-header clearfix">
                        <h2>Torrents List View By Date</h2>
                        <h3 class="custom-month-year">
                            <span id="custom-month" class="custom-month"></span>
                            <span id="custom-year" class="custom-year"></span>
                            <nav>
                                <span id="custom-prev" class="custom-prev"></span>
                                <span id="custom-next" class="custom-next"></span>
                                <span id="custom-current" class="custom-current" title="Got to current date"></span>
                            </nav>
                        </h3>
                    </div>
                    <div id="calendar" class="fc-calendar-container"></div>
                </div>
            </div><!-- /container -->
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
            <script type="text/javascript" src="scripts/jquery.calendario.js"></script>
            <script>
                <%
                    out.println("var trackerTorrentsList = {");
                    TorrentsSessionStub stub = new TorrentsSessionStub();
                    List<TorrentsEntity> list = stub.findAll();
                    SimpleDateFormat sdf = new SimpleDateFormat("MM-dd-yyyy");
                    if (!list.isEmpty()) {
                        Iterator<TorrentsEntity> it = list.iterator();
                        while (it.hasNext()) {
                            TorrentsEntity entity = it.next();
                            String datenow = entity.getTorrentTime();
                            Date date = new SimpleDateFormat("yyyy-MM-dd", Locale.ENGLISH).parse(datenow);
                            if (it.hasNext()) {
                                out.println("'" + sdf.format(date) + "' : '<a style=\" font-size: 18px;\" href=\"singleTorrent.jsp?torrentId=" + entity.getTorrentId() + "\">" + entity.getTorrentName() + "</a>',");
                            } else {
                                out.println("'" + sdf.format(date) + "' : '<a style=\" font-size: 18px;\" href=\"singleTorrent.jsp?torrentId=" + entity.getTorrentId() + "\">" + entity.getTorrentName() + "</a>'");
                            }
                        }
                    }
                    out.println("};");
                %>

            </script>
            <script type="text/javascript">	
                $(function() {
			
                    var cal = $( '#calendar' ).calendario( {
                        onDayClick : function( $el, $contentEl, dateProperties ) {

                            for( var key in dateProperties ) {
                                console.log( key + ' = ' + dateProperties[ key ] );
                            }

                        },
                        caldata : trackerTorrentsList
                    } ),
                    $month = $( '#custom-month' ).html( cal.getMonthName() ),
                    $year = $( '#custom-year' ).html( cal.getYear() );

                    $( '#custom-next' ).on( 'click', function() {
                        cal.gotoNextMonth( updateMonthYear );
                    } );
                    $( '#custom-prev' ).on( 'click', function() {
                        cal.gotoPreviousMonth( updateMonthYear );
                    } );
                    $( '#custom-current' ).on( 'click', function() {
                        cal.gotoNow( updateMonthYear );
                    } );

                    function updateMonthYear() {				
                        $month.html( cal.getMonthName() );
                        $year.html( cal.getYear() );
                    }
			
                });
            </script>
        </div>
        <script src="scripts/meny.min.js"></script>
        <script>
            // Create an instance of Meny
            var meny = Meny.create({
                // The element that will be animated in from off screen
                menuElement: document.querySelector( '.meny' ),

                // The contents that gets pushed aside while Meny is active
                contentsElement: document.querySelector( '.contents' ),

                // [optional] The alignment of the menu (top/right/bottom/left)
                position: Meny.getQuery().p || 'left',

                // [optional] The height of the menu (when using top/bottom position)
                height: 200,

                // [optional] The width of the menu (when using left/right position)
                width: 260,

                // [optional] Distance from mouse (in pixels) when menu should open
                threshold: 40
            });

            // Embed an iframe if a URL is passed in
            if( Meny.getQuery().u && Meny.getQuery().u.match( /^http/gi ) ) {
                var contents = document.querySelector( '.contents' );
                contents.style.padding = '0px';
                contents.innerHTML = '<div class="cover"></div><iframe src="'+ Meny.getQuery().u +'" style="width: 100%; height: 100%; border: 0; position: absolute;"></iframe>';
            }
        </script>
    </body>
</html>
